<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <title>资源</title>
    <link href="/static/layui/css/layui.css" rel="stylesheet">
    <script src="/static/layui/layui.js"></script>
</head>
<body>

<!-- 播放列表 -->
<table class="layui-table"
       id="tableList"
       lay-data="{url:'/terminal-resouce/list', id:'tableList', toolbar: '#topToolbar' }" lay-filter="tableList">
    <thead>
    <tr>
        <th lay-data="{type: 'numbers', width:40}">序号</th>
        <th lay-data="{field:'id',width:201, align:'center'}">ID</th>
        <th lay-data="{field:'name',width:200, align:'center'}">资源名称</th>
        <th lay-data="{field:'location', align:'center'}">资源存放位置</th>
        <th lay-data="{field:'source',width:125, templet: '#source', align:'center'}">资源来源</th>
        <th lay-data="{field:'type',width:90, templet: '#type', align:'center'}">类型</th>
        <th lay-data="{field:'fileId',width:201, align:'center'}">数据源ID</th>
        <th lay-data="{field:'gangedId',width:201, align:'center'}" th:if="${playerGanged} == true">联动资源ID</th>
        <th lay-data="{field:'status',width:90, templet: '#status', align:'center'}">状态</th>
        <th lay-data="{fixed: 'right', width:150, align:'center', toolbar: '#tool'}" style="background-color: #0C0C0C">
            操作
        </th>
    </tr>
    </thead>
</table>

<script id="status" type="text/html">
    {{# if(d.status === 1){ }}
    <span class="layui-badge layui-bg-green">正在播放</span>
    {{# } else if(d.status === 0) { }}
    <span class="layui-badge layui-bg-black">等待播放</span>
    {{# } else { }}
    <span class="layui-badge" style="background-color: #9F9F9F">无关项</span>
    {{# } }}
</script>

<script id="type" type="text/html">
    {{# if(d.type === 1){ }}
    <span class="layui-badge layui-bg-blue">待机资源</span>
    {{# } else if(d.type === 0){}}
    <span class="layui-badge layui-bg-black">视频资源</span>
    {{# } else if(d.type === 2){}}
    <span class="layui-badge" style="background-color: #1b12ff">互动程序</span>
    {{# } }}
</script>

<script id="source" type="text/html">
    {{# if(d.source === 1){ }}
    <span class="layui-badge layui-bg-cyan">手动导入</span>
    {{# } else { }}
    <span class="layui-badge layui-bg-black">中控服务器发布</span>
    {{# } }}
</script>

<!--列操作-->
<script id="tool" type="text/html">
    <a class="layui-btn layui-btn-xs layui-bg-black" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!--列操作事件-->
<script>
    //弹出层id
    var updateOpenId;
    var flushObj;

    layui.use('table', function () {
        var table = layui.table;
        var $ = layui.$;
        //工具条事件
        table.on('tool(tableList)', function (obj) { //注：tool 是工具条事件名，test 是 tableList 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            flushObj = obj;
            if (layEvent === 'del') { //删除
                layer.confirm('确定删除该数据吗', function (index) {
                    //刷新
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);

                    //向服务端发送删除指令
                    $.ajax({
                        url: '/terminal-resouce/' + data.id + '/' + data.type,
                        type: 'DELETE',
                        contentType: "application/atom+xml",
                        success: function (data) {
                            if (data.code == 200) {
                                layer.msg("删除成功")
                                return false;
                            } else {
                                layer.msg(data.msg)
                                return false;
                            }
                        }, error: function (msg) {
                            return false;
                        }

                    });
                });
            } else if (layEvent === 'edit') { //编辑
                $("[name='location']").val(data.location)
                $("[name='name']").val(data.name)
                $("#gangedId").val(data.gangedId)
                $("#updateId").val(data.id)
                $("#updateType").val(data.type)
                $('#updateForm').show()
                updateOpenId = layer.open({
                    title: '修改'
                    , type: 1,
                    content: $('#updateForm') //这里content是一个普通的String
                    , end: function (index, layero) {
                        $('#updateForm').hide()
                    }
                });
            }
        });
    });

</script>

<!--工具栏-->
<script id="topToolbar" type="text/html">
    <a class="layui-btn layui-bg-blue" lay-event="return" href="/terminal/index">返回首页</a>
    <a class="layui-btn  layui-bg-green" onclick="add()">新增</a>
</script>

<!--新增-->
<script>
    //新增弹出层id
    var addOpenId;

    function add() {
        var $ = layui.$;
        $('#addForm').show();
        //打开弹出层
        addOpenId = layer.open({
            title: '新增'
            , type: 1,
            content: $('#addForm') //这里content是一个普通的String
            , end: function (index, layero) {
                $('#addForm').hide()
            }
        });
    }
</script>

<!--提交修改事件-->
<script>
    //Demo
    layui.use('form', function () {
        var form = layui.form;
        var $ = layui.$;

        //监听提交
        form.on('submit(updateSubmit)', function (data) {
            //按钮禁用
            $('#updateSubmit').addClass("layui-btn-disabled").attr("disabled", true);
            $('#updateSubmit').html("处理中")
            $('#reset').addClass("layui-btn-disabled").attr("disabled", true);

            $.ajax({
                url: '/terminal-resouce/update',
                type: 'put',
                data: JSON.stringify(data.field),
                contentType: "application/json",
                success: function (data) {
                    if (data.code == 200) {
                        //关闭弹出层
                        layer.close(updateOpenId);
                        //刷新
                        layui.table.reload('tableList', {});
                        layer.msg("修改成功")

                        //解除按钮禁用状态
                        $('#updateSubmit').removeClass("layui-btn-disabled").attr("disabled", false);
                        $('#updateSubmit').html("修改")
                        $('#reset').removeClass("layui-btn-disabled").attr("disabled", false);
                        return false;
                    } else {
                        //解除按钮禁用状态
                        $('#updateSubmit').removeClass("layui-btn-disabled").attr("disabled", false);
                        $('#updateSubmit').html("修改")
                        $('#reset').removeClass("layui-btn-disabled").attr("disabled", false);
                        layer.msg(data.msg)
                        return false;
                    }
                }, error: function (msg) {
                    //解除按钮禁用状态
                    $('#updateSubmit').removeClass("layui-btn-disabled").attr("disabled", false);
                    $('#updateSubmit').html("修改")
                    $('#reset').removeClass("layui-btn-disabled").attr("disabled", false);
                    return false;
                }

            });

            return false;
        });
    });
</script>

<!--弹出层-修改-->
<div id="updateForm" style="width: 800px; display: none">
    <form action="" class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">资源名称</label>
            <div class="layui-input-block" style="width: 647px">
                <input autocomplete="off" class="layui-input" lay-verify="required" name="name"
                       placeholder="名称同时在Pad端显示"
                       type="text">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">资源位置</label>
            <div class="layui-input-block" style="width: 647px">
                <input autocomplete="off" class="layui-input" lay-verify="required" name="location"
                       placeholder="请输入新的资源路径"
                       required
                       type="text">
            </div>
        </div>

        <div class="layui-form-item" th:if="${playerGanged} == true">
            <label class="layui-form-label">联动资源ID</label>
            <div class="layui-input-block" style="width: 647px">
                <input autocomplete="off" class="layui-input" id="gangedId" lay-verify="number"
                       name="gangedId" placeholder="请输入联动资源ID" type="text"
                       value=" ">
            </div>
        </div>

        <input id="updateId" name="id" type="hidden">
        <input id="updateType" name="type" type="hidden">

        <div class="layui-form-item">
            <div class="layui-input-block" style="left: 228px; width: 146px">
                <button class="layui-btn" id="updateSubmit" lay-filter="updateSubmit" lay-submit>修改</button>
                <button class="layui-btn layui-btn-primary" id="reset" type="reset">重置</button>
            </div>
        </div>
    </form>
</div>

<!--新增页面-->
<div id="addForm" style="width: 800px;height: 420px; display: none;">
    <form action="" class="layui-form" style="white-space:nowrap!important;">
        <div class="layui-form-item">
            <label class="layui-form-label">资源名称</label>
            <div class="layui-input-block" style="width: 647px">
                <input autocomplete="off" class="layui-input" lay-verify="required" name="mediaName"
                       placeholder="名称同时在Pad端显示"
                       type="text">
            </div>
        </div>
        <div class="layui-form-item" id="gangedIdDiv" style="display: none">
            <label class="layui-form-label">联动资源ID</label>
            <div class="layui-input-block" style="width: 647px">
                <input autocomplete="off" class="layui-input" lay-verify="number" name="gangedId"
                       placeholder="开启播放联动后拷贝跟主屏联动的资源ID在此" type="text"
                       value=" ">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">资源类型</label>
            <div class="layui-input-block" style="width: 647px">
                <select name="type">
                    <option value="1">视频</option>
                    <option value="2">图片</option>
                    <option value="3">音频</option>
                    <option value="4">可执行文件</option>
                    <option value="5">其他</option>
                    <option value="6">互动程序</option>
                    <option value="7">待机资源</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">资源存放目录</label>
            <div class="layui-input-block" style="width: 647px">
                <input autocomplete="off" class="layui-input" lay-verify="required" name="resourceAddrs"
                       placeholder="请拷贝资源完整路径,包括后缀名.如：C:\Users\guodong\Videos\Wildlife.wmv" type="text">
            </div>
        </div>
        <input id="playerGanged" th:value="${playerGanged}" type="hidden">
        <div class="layui-form-item">
            <div class="layui-input-block" style="left: 228px; width: 146px">
                <button class="layui-btn" id="addSubmit" lay-filter="addSubmit" lay-submit>立即提交</button>
            </div>
        </div>
    </form>
</div>

<script src="/static/layui/layui.js"></script>

<!--新增页面按钮提交事件-->
<script>
    layui.use(['form'], function () {
        var form = layui.form;
        var $ = layui.$;
        //监听提交
        form.on('submit(addSubmit)', function (data) {
            //按钮禁用
            $('#addSubmit').addClass("layui-btn-disabled").attr("disabled", true);
            $('#addSubmit').html("处理中")

            $.ajax({
                url: '/terminal-resouce',
                type: 'post',
                data: data.field,
                contentType: "application/x-www-form-urlencoded",
                success: function (data) {
                    if (data.code == 200) {
                        //关闭弹出层
                        layer.close(addOpenId);
                        //刷新
                        layui.table.reload('tableList', {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            },
                        });

                        layer.msg("提交成功")
                        //解除按钮禁用状态
                        $('#addSubmit').removeClass("layui-btn-disabled").attr("disabled", false);
                        $('#addSubmit').html("立刻提交")
                        //清空输入框
                        $("[name = 'mediaName']").val("");
                        $("[name = 'resourceAddrs']").val("");
                    } else {
                        layer.msg(data.msg)
                        //解除按钮禁用状态
                        $('#addSubmit').removeClass("layui-btn-disabled").attr("disabled", false);
                        $('#addSubmit').html("立刻提交")
                    }
                }, error: function (msg) {
                    //解除按钮禁用状态
                    $('#addSubmit').removeClass("layui-btn-disabled").attr("disabled", false);
                    $('#addSubmit').html("立刻提交")
                }

            });
            return false;
        });
    });

    // 判断是否显示联动主屏资源id输入框
    var playerGanged = layui.$('#playerGanged').val();
    if (playerGanged == 'true') {
        layui.$('#gangedIdDiv').show();
    }
</script>

</body>

</html>
